<template>
  <el-dialog :title="title" v-model="open" width="500px" append-to-body>
    <el-form ref="channelRef" :model="form" :rules="rules" label-width="100px">
      <el-row>
        <el-col :span="24">
          <el-form-item :label="$t('channelType.name')" prop="channelName">
            <el-input v-model="form.channelName" :placeholder="$t('channelType.namePlaceholder')" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="$t('channelType.code')" prop="channelCode">
            <el-input v-model="form.channelCode" :placeholder="$t('channelType.codePlaceholder')" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item :label="$t('channelType.description')" prop="description">
        <el-input v-model="form.description" type="textarea" :placeholder="$t('channelType.descriptionPlaceholder')" />
      </el-form-item>
      <el-form-item :label="$t('channelType.sortIndex')" prop="sortIndex">
        <el-input-number v-model="form.sortIndex" controls-position="right" :min="0" style="width: 100%" />
      </el-form-item>
      <el-form-item :label="$t('channelType.status')">
        <el-radio-group v-model="form.status">
          <el-radio
              v-for="dict in sys_normal_disable"
              :key="dict.value"
              :label="dict.value"
          >{{ dict.label }}</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">{{ $t('jbx.text.submit') }}</el-button>
        <el-button @click="cancel">{{ $t('jbx.text.close') }}</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup name="ChannelTypeEdit" lang="ts">
import { ref, getCurrentInstance, reactive, toRefs, nextTick, watch } from "vue";
import { ElForm } from "element-plus";
import modal from "@/plugins/modal";
import { useI18n } from "vue-i18n";
import { getChannel, saveChannel, updateChannel } from "@/api/channel/channel";

const { t } = useI18n();
const { proxy } = getCurrentInstance()!;

// 字典数据
const { sys_normal_disable } = proxy.useDict("sys_normal_disable");

const emit = defineEmits(['dialogOfClosedMethods']);

const open = ref(false);
const title = ref("");
const channelRef = ref<InstanceType<typeof ElForm> | null>(null);

// 定义变量
const data = reactive({
  form: {
    id: undefined,
    channelName: undefined,
    channelCode: undefined,
    description: undefined,
    sortIndex: 0,
    status: 1
  },
  rules: {
    channelName: [{ required: true, message: t('channelType.nameRequired'), trigger: "blur" }],
    channelCode: [{ required: true, message: t('channelType.codeRequired'), trigger: "blur" }],
    sortIndex: [{ required: true, message: t('channelType.sortRequired'), trigger: "blur" }]
  }
});

const { form, rules } = toRefs(data);

const props = defineProps<{
  title?: string
  open?: boolean
  formId?: string
}>();

watch(
    () => props.open,
    (val) => {
      if (val) {
        open.value = val
        if (props.formId) {
          getChannel(props.formId).then((response: any) => {
            form.value = response.data;
          });
        } else {
          reset();
        }
      } else {
        open.value = false;
      }
    },
    { immediate: true }
);

// 重置表单
function reset() {
  form.value = {
    id: undefined,
    channelName: undefined,
    channelCode: undefined,
    description: undefined,
    sortIndex: 0,
    status: 1
  };
  channelRef.value?.resetFields();
}

// 提交表单
function submitForm() {
  channelRef.value?.validate((valid) => {
    if (valid) {
      if (form.value.id) {
        // 修改渠道类型
        updateChannel(form.value).then(() => {
          modal.msgSuccess(t('jbx.alert.update.success'));
          open.value = false;
          emit("dialogOfClosedMethods", true);
        });
      } else {
        // 新增渠道类型
        saveChannel(form.value).then(() => {
          modal.msgSuccess(t('jbx.alert.add.success'));
          open.value = false;
          emit("dialogOfClosedMethods", true);
        });
      }
    }
  });
}

// 取消
function cancel() {
  open.value = false;
  channelRef.value?.resetFields();
  emit("dialogOfClosedMethods", false);
}
</script>